<template>
  <div class="box jgzc_box_item_box">
    <div class="allbox loginallbox">
      <div class="tag_box">
        <div class="tab">{{ this.$route.meta.title }}</div>
      </div>
      <div class="login_box_gr">
        <div class="login_box_gr_input zc" style="width: 8rem">
          <div class="login_title">{{ this.$route.meta.title }}</div>

          <el-input placeholder="请输入机构名称" v-model="form.name">
            <template slot="prepend"
              ><span style="color: red">*</span> 机构名称：</template
            >
          </el-input>

          <!-- <el-input placeholder="请输入企业类型" v-model="form.company_type">
            <template slot="prepend"
              ><span style="color: red">*</span> 企业类型：</template
            >
          </el-input> -->
          <div class="tc_gd_box">
            <div class="tc_gd_box_prepend_box">
              <span style="color: red">*</span>&nbsp;类型：
            </div>
            <el-select placeholder="请输入股东类型" v-model="form.company_type">
              <el-option
                v-for="(item, index) in list"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>

          <el-input
            placeholder="请输入社会统一信用代码"
            v-model="form.unify_code"
          >
            <template slot="prepend"
              ><span style="color: red">*</span> 社会统一信用代码：</template
            >
          </el-input>

          <el-input placeholder="请输入法定代表人" v-model="form.legal_name">
            <template slot="prepend"
              ><span style="color: red">*</span> 法定代表人：</template
            >
          </el-input>

          <el-input placeholder="请输入负责人手机号" v-model="form.account">
            <template slot="prepend"
              ><span style="color: red">*</span> 负责人手机号：</template
            >
          </el-input>

          <el-input placeholder="请输入电子信箱" v-model="form.email">
            <template slot="prepend"
              ><span style="color: red">*</span> 电子信箱：</template
            >
          </el-input>

          <el-input
            show-password
            placeholder="请输入密码"
            v-model="form.password"
          >
            <template slot="prepend"
              ><span style="color: red">*</span> 用户密码：</template
            >
          </el-input>
          <el-input
            show-password
            placeholder="请再次输入密码"
            v-model="form.repassword"
          >
            <template slot="prepend"
              ><span style="color: red">*</span> 再次确认密码：</template
            >
          </el-input>
          <el-input placeholder="请输入验证码" v-model="form.code" class="yaz">
            <template slot="prepend"
              ><span style="color: red">*</span> 手机验证码：</template
            >
            <template slot="append"
              ><p style="cursor: pointer" @click="check()" v-if="isSend">
                发送验证码
              </p>
              <p v-if="!isSend">{{ sendmsg }}</p></template
            >
          </el-input>

          <div class="delu" @click="zc()">注册</div>
          <div class="tishi_login">
            <div>
              已有账号，去
              <router-link to="jglogin"
                ><span class="tz">登录</span></router-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      form: {
        account: "",
        name: "",
        legal_name: "",
        password: "",
        repassword: "",
        code: "",
      },
      sendmsg: "发送验证码",
      isSend: true,
      list: [],
    };
  },

  mounted() {
    this.getlist();
  },
  methods: {
    //获取企业类型
    getlist() {
      let that = this;
      let data = {};
      that.$http.post("mechanism/company_type", data).then((res) => {
        if (res.code == 1) {
          that.list = res.data;
        } else {
          this.list = [];
        }
      });
    },
    /**
     * 发送验证码
     */
    check() {
      let that = this;
      let data = {
        type: 1,
        mobile: that.form.account,
        event: "register", //验证码类型
      };
      // console.log(data)
      that.$http.post("sms/send", data).then((res) => {
        that.$self.ts(res, 1).then((e) => {
          this.isSend = false;
          let timer = 60;
          this.sendmsg = timer + "s";
          this.timeFun = setInterval(() => {
            --timer;
            this.sendmsg = timer + "s";
            if (timer == 0) {
              this.isSend = true;
              this.sendmsg = "重新发送";
              clearInterval(this.timeFun);
            }
          }, 1000);
        });
        // console.log(res);
      });
    },
    /**
     * 会员注册
     */
    zc() {
      let that = this;
      let data = that.form;
      // console.log(JSON.stringify(data))
      that.$http.post("mechanism/register", data).then((res) => {
        that.$self.ts(res, 2).then((e) => {
          // console.log(e);
          this.$router.push({ path: "/jglogin" });
        });
      });
    },
    //  ==
  },
};
</script>
    <style scoped>
.zc .yaz ::v-deep .el-input-group__append {
  color: #333;
}
::v-deep .el-input-group__prepend {
  width: 144px;
  color: #333;
}

.yaz .el-input__inner {
  /* border-right: none; */
}
.yaz .el-input-group__append {
  background: #fff;
  border-left: none;
  font-size: 0.17rem;
  color: #1954a4;
  padding: 0 0.25rem;
}
@media screen and (max-width: 1385px) {
  .zc .yaz .el-input-group__append,
  .el-input-group__prepend {
    width: 1.8rem;
    font-size: 0.1625rem;
    padding: 0 0.0375rem;
    text-align: center;
  }
}
.tc_gd_box {
  display: flex;
  margin-top: 0.375rem;
}
.tc_gd_box_prepend_box {
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  white-space: nowrap;
  width: 201px;
  color: #333;
  display: flex;
  align-items: center;
  font-size: 14px;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tc_gd_box ::v-deep .el-select .el-input {
  margin: 0 !important;
}
.tc_gd_box ::v-deep .el-select {
  width: 100%;
}
.tc_gd_box ::v-deep .el-input__inner {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
</style>